<template>
  <div>
    <authTable
      v-loading="loading"
      :table-opts="tableOpts"
      :is-column-search="false"
      :pagination-data="{
        total: total,
        queryParams: filterForm
      }"
      @pagination="pagination"
      @searchReset="handleReset"
      @searchChange="handleQuery"
    >
      <template #toolbarBtn>
        <el-input
          v-model.trim="filterForm.realName"
          placeholder="请输入用户姓名"
          style="width:280px"
          size="small"
          clearable
          maxlength="30"
          @keyup.enter.native="handleQuery"
          @clear="handleReset"
        />
        <el-checkbox v-model="hasChildren" label="含下级组织用户" style="margin-left: 50px;" />
        <div class="btnGroup" />
      </template>
      <template #realName="realName">
        <el-popover
          trigger="click"
          placement="right"
          width="320"
          popper-class="popoverClass"
        >
          <personCard
            v-if="realName.param.userId === personId"
            :ref="realName.param.userId"
            :person-id="personId"
          />
          <!-- <el-link slot="reference" @click="nameCardClick(realName.param)"> {{ realName.param.realName }}</el-link> -->
          <span
            slot="reference"
            style="cursor: pointer;text-decoration: underline;"
            @click="nameCardClick(realName.param)"
          >
            {{ realName.param.realName }}
          </span>
        </el-popover>
      </template>
    </authTable>
    <baseRoleAuthorizationVue ref="baseRoleAuthorizationVueRef" />
    <!-- <personCard v-if="cardShow" :person-id="personId" @closeCard="closeCard" /> -->
  </div>
</template>
<script>
import personCard from '@/framework/components/auth-coms/authCard/index.vue'
import bussinessUserAuthorizationApi from '@/framework/api/authCenter/bussinessUserAuthorization/bussinessUserAuthorization'
import baseRoleAuthorizationVue from './baseRoleAuthorization.vue'

export default {
  dicts: ['sex'],
  components: { baseRoleAuthorizationVue, personCard },
  props: {
    orgId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      cardindex: 0,
      personId: '',
      cardShow: false,
      // 遮罩层
      loading: false,
      // 总条数
      total: 0,
      // 用户组织机构关联表格数据
      list: [],
      // 查询参数
      filterForm: {
        realName: '',
        account: '',
        position: '',
        orgId: '',
        hasChildren: 0,
        pageNo: 1,
        pageSize: 10
      },
      hasChildren: false,
      tableOpts: {
        rowKey: 'userId',
        tableData: [],
        toolbarBtn: [],
        customSearch: [{
        }],
        // 表格第一列
        firstTableCol: {
          select: false,
          width: 55,
          type: 'selection'
        },
        tableCol: [
          {
            prop: 'account',
            label: '账号',
            show: true,
            search: true,
            align: 'left'
          },
          {
            prop: 'realName',
            label: '姓名',
            show: true,
            search: true,
            columnSearch: false,
            slotName: 'realName',
            align: 'left'
            // searchType: 'select',
            // searchData: () => {
            //   return [{ label: 'xiaohong', value: '1' }, { label: 'bai', value: '2' }]
            // }
          },
          {
            prop: 'sex',
            label: '性别',
            show: true,
            columnSearch: false,
            align: 'left',
            type: 'dict',
            formatter: () => { return this.dict.type.sex }
          },
          {
            prop: 'positionName',
            label: '岗位',
            show: true,
            columnSearch: false,
            align: 'left'
          },
          {
            prop: 'orgName',
            label: '所属组织',
            show: true,
            searchType: 'select',
            align: 'left',
            disabled: true
          }
        ],
        operator: {
          width: 140,
          align: 'left',
          operatorBtn: [
            {
              text: '基于角色授权',
              permission: ['BUSINESSUSERAUTHORIZATION_BASEROLE_BUTTON'],
              size: 'small',
              // disabledChange: (row) => { return row.superAdminFlag == 'Y' },
              click: (row, col, cellValue) => { return this.openDrawer(row) }
            }
          ]
        }
      }
    }
  },
  watch: {
    orgId(n, o) {
      this.getList()
    },
    'filterForm.realName': function (n, o) {
      this.getList()
    },
    hasChildren(n, o) {
      this.getList()
    }
  },
  created() {
    // this.getList()
  },
  methods: {
    nameCardClick(val) {
      this.personId = val.userId
    },
    closeCard() {
      this.personId = ''
      this.cardShow = false
    },
    getList() {
      this.loading = true
      this.filterForm.orgId = this.orgId
      this.filterForm.hasChildren = this.hasChildren ? 1 : 0
      bussinessUserAuthorizationApi.getUserPage(this.filterForm).then((res) => {
        this.tableOpts.tableData = res.data.rows
        this.total = res.data.totalRows
        this.loading = false
      })
    },
    /** 搜索按钮操作 */
    handleQuery(formModel) {
      this.filterForm = { ...this.filterForm, ...formModel }
      this.filterForm.pageNo = 1
      this.getList()
    },
    /** 重置按钮操作 */
    handleReset() {
      this.filterForm = {
        realName: '',
        accpunt: '',
        position: '',
        pageNo: 1,
        pageSize: 10
      }
      this.handleQuery()
    },
    pagination() {
      this.getList(this.filterForm)
    },
    openDrawer(row) {
      this.$refs.baseRoleAuthorizationVueRef.drawer = true
      this.$refs.baseRoleAuthorizationVueRef.userId = row.userId
      this.$refs.baseRoleAuthorizationVueRef.getUserInfo()
      this.$refs.baseRoleAuthorizationVueRef.getList()
    }
  }
}
</script>
<style scoped lang="scss">
.createUserDiv {
  display: flex;
  align-items: center;
  cursor: pointer;
  ::v-deep .el-avatar--small.name-circle {
    width: 28px;
    height: 28px;
    background: linear-gradient(180deg, #B8E24B 0%, #129A37 100%);
    margin-right: 8px;
  }
}
</style>
